<template>
	<header>
		<div class="logo">
			<img src="@/assets/images/badImages/logo.jpg" alt="">
		</div>
		<div class="search" @click="goSearch">
			<i class="iconfont icon-sousuo"></i>
			<span>搜您喜欢的...</span>
		</div>
		<div class="kefu">
			<span class="iconfont icon-kefu"></span>
		</div>
	</header>
</template>

<script>
	export default {
		name:'Header',
		methods:{
			goSearch(){
				this.$router.push({
					path:'search'
				})
			}
		}
	}
</script>

<style scoped>
	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #b0352f;
		width: 100vw;
		height: 1.2rem;
	}
	.logo{
		margin-left: 10px;
		width: 70px;
		height: 100%;
	}
	img{
		height: 100%;
		width: 100%;
	}
	.search{
		margin-left: 5px;
		font-size: 14px;
		display: flex;
		align-items: center;
		width: 240px;
		height: 30px;
		background-color: #fff;
		border-radius: 15px;
		color: #ccc;
	}

	.search i {
		padding: 0 10px;
	}
	.kefu{
		height: 100%;
		width: 50px;
	}
	.icon-kefu{
		color: #ccc;
		display: block;
		font-size: 30px;
		height: 100%;
		width: 100%;
		text-align: center;
		line-height: 45px;
	}
</style>